import React from "react";
import { Layout, Input, Switch, DatePicker, Button } from "antd";
import BillType from "./billType";
import BillList from "./billList";
import Loading from "../base/loading";
import moment from "moment";

const { Header, Sider, Content } = Layout;
const { TextArea } = Input;

const BillMain = ({
  incomeList,
  outcomeList,
  money,
  desc,
  isIncome,
  isSubmit,
  handleSetDate,
  handleSetMoney,
  handleSetDesc,
  handleSetType,
  handleSetIsIncome,
  handleSubmit
}) => {
  return (
    <div className="bill-main">
      {
        isSubmit ? <Loading /> : null
      }
      <Layout className="bill-layout">
        <Header className="bill-header"></Header>
        <Layout className="bill-layout">
          <Content className="bill-content">
            <DatePicker
              defaultValue={moment()}
              onChange={handleSetDate}
              className="bill-gap bill-bigger"
              dateRender={current => {
                const style = {};
                if (current.date() === 1) {
                  style.border = "1px solid #1890ff";
                  style.borderRadius = "50%";
                }
                return (
                  <div className="ant-calendar-date" style={style}>
                    {current.date()}
                  </div>
                );
              }}
            />
            <div className="bill-gap bill-input_wrapper">
              <Input
                value={money}
                prefix="金额："
                suffix="RMB"
                type="number"
                min="0"
                className="bill-bigger bill-content_input"
                onChange={handleSetMoney}
              />
              <Switch
                checked={isIncome}
                className="bill-switch"
                checkedChildren="收入"
                unCheckedChildren="支出"
                onChange={handleSetIsIncome}
              />
            </div>
            <BillType onChange={handleSetType} />
            <TextArea
              value={desc}
              onChange={handleSetDesc}
              className="my-input bill-gap bill-remarks"
              placeholder="点击此输入备注..."
              rows={4}
            />
            <Button type="primary" className="bill-btn" loading={isSubmit} onClick={handleSubmit}>
              记一笔
            </Button>
          </Content>
          <Sider className="bill-list" theme="light" width="300">
            <BillList title="支出" data={outcomeList} />
            <BillList title="收入" data={incomeList} isIncome />
          </Sider>
        </Layout>
      </Layout>
    </div>
  );
};

export default BillMain;
